<template>
  <el-form label-width="auto" label-position="left" class="p-16" v-if="form">
    <CellBox title="基础信息">
      <FlexBox :list="3" :margin="1">
        <ElFormItemBox label="产品名称" class="wAuto">
          <TextBox :data="form?.baseData?.productName" />
        </ElFormItemBox>
        <ElFormItemBox label="产品来源">
          <TextBox :data="form?.baseData?.productSource" :options="proxy.$optionsArr.productSource" />
        </ElFormItemBox>
        <ElFormItemBox label="产品类型">
          <TextBox :data="form?.baseData?.productType" :options="options.productType" />
        </ElFormItemBox>
        <ElFormItemBox label="产品单价" v-permission="`MenuCode1-6-4`">
          <TextBox :data="form?.baseData?.productPrice" unit="元" />
        </ElFormItemBox>
        <ElFormItemBox label="最低金额" v-permission="`MenuCode1-6-4`">
          <TextBox :data="form?.baseData?.minimumAmount" unit="元" />
        </ElFormItemBox>
        <ElFormItemBox label="产品要求" class="wAuto">
          <TextBox :data="form?.baseData?.productRequirement" />
        </ElFormItemBox>
      </FlexBox>
    </CellBox>
    <CellBox title="产品信息">
      <FlexBox :list="3" :margin="1">
        <ElFormItemBox label="产品样式">
          <TextBox :data="form?.baseData?.productStyle" :options="proxy.$optionsArr.productStyle" />
        </ElFormItemBox>
        <ElFormItemBox label="产品单位">
          <TextBox :data="form?.baseData?.productUnit" />
        </ElFormItemBox>
        <ElFormItemBox label="贴标方式">
          <TextBox :data="form?.baseData?.tagAffixWay" :options="proxy.$optionsArr.tagAffixWay" />
        </ElFormItemBox>
        <template v-if="[2, 3, 4].includes(form?.baseData?.productStyle)">
          <ElFormItemBox label="出标方向">
            <TextBox :data="form?.baseData?.outDirection" :options="proxy.$optionsArr.outDirection" />
          </ElFormItemBox>
          <template v-if="[2, 4].includes(form?.baseData?.productStyle)">
            <ElFormItemBox label="卷向">
              <TextBox :data="form?.baseData?.scrollDirection" :options="proxy.$optionsArr.scrollDirection" />
            </ElFormItemBox>
            <ElFormItemBox label="卷芯大小">
              <TextBox :data="form?.baseData?.mandrelSize" unit="mm" />
            </ElFormItemBox>
            <ElFormItemBox label="外直径不超过">
              <TextBox :data="form?.baseData?.notOverDiameter" unit="mm" />
            </ElFormItemBox>
          </template>
        </template>
      </FlexBox>
    </CellBox>
    <CellBox title="阶梯价格" v-permission="`MenuCode1-6-4`">
      <TableBoxMx v-if="form?.baseData?.productPrice" :data="{
        disabled: true,
        tbody: [
          {
            productSteppedRange: '',
            productSteppedCount: 0,
            productSteppedPrice: form?.baseData?.productPrice,
            discount: 1,
          },
        ].concat(form?.productSteppedPriceInfoList || []),
        thead: [
          {
            label: '阶梯范围描述',
            prop: 'productSteppedRange',
            align: 'center',
            width: 200,
          },
          {
            label: '阶梯数量',
            prop: 'productSteppedCount',
            align: 'center',
            width: 100,
          },
          {
            label: '阶梯价格',
            prop: 'productSteppedPrice',
            align: 'center',
            width: 100,
          },
          {
            label: '折扣率',
            prop: 'discount',
            align: 'center',
            width: 80,
          },
          {
            label: '备注',
            prop: 'remark',
            align: 'left',
            width: null,
          },
        ],
      }">
        <template #productSteppedRange="{ row, index }">
          <span v-if="row.productSteppedCount || row.productSteppedCount === 0">
            {{ `${row.productSteppedCount} <= 数量 < ${index < form?.productSteppedPriceInfoList.length ?
              `${form?.productSteppedPriceInfoList[index].productSteppedCount}` : '无限'}` }} </span>
              <span v-else>待设置</span>
        </template>
      </TableBoxMx>
    </CellBox>
    <CellBox title="标签信息">
      <ProductTag :data="form?.productTagList || []" />
    </CellBox>
    <CellBox title="产品型号">
      <TableBoxMx :data="{
        disabled: true,
        tbody: form?.productSpecificationList || [],
        thead: [
          {
            label: '成品编码',
            prop: 'productSpecificationNumber',
            align: 'center',
            width: 180,
          },
          {
            label: '产品型号',
            prop: 'productSpecificationName',
            align: 'center',
            width: 200,
          },
          {
            label: '备注',
            prop: 'remark',
            align: 'left',
            width: null,
          },
        ],
      }">
      </TableBoxMx>
    </CellBox>
    <CellBox title="彩稿信息">
      <ElImgListBox :data="form.productColorDraftFileList" urlKey="draftFileUrl" />
    </CellBox>
    <CellBox title="颜色信息">
      <TableBoxMx :data="{
        disabled: true,
        tbody: form?.productPrintingColorList || [],
        thead: [
          {
            label: '颜色名称',
            prop: 'colorName',
            align: 'center',
            width: 260,
          },
          {
            label: '颜色参考',
            prop: 'colorReference',
            align: 'center',
            width: 160,
            options: proxy.$optionsArr.colorType
          },
          {
            label: '备注',
            prop: 'colorRemark',
            align: 'center',
          }
        ],
      }">
      </TableBoxMx>
    </CellBox>
    <CellBox title="生产信息">
      <FlexBox :list="3" :margin="1">
        <ElFormItemBox label="生产方式">
          <TextBox :data="form?.baseData?.productionMode" :options="proxy.$optionsArr.productionMode" />
        </ElFormItemBox>
        <ElFormItemBox label="生产尺寸">
          <TextBox :data="form?.baseData?.productionDimensions"
            :unit="form?.baseData?.productionMode === 1 ? 'T' : 'mm'" />
        </ElFormItemBox>
        <ElFormItemBox label="印刷拼版">
          <TextBox :data="form?.baseData?.makeupPrintingCombine" />
        </ElFormItemBox>
        <ElFormItemBox label="刀模模数">
          <TextBox :data="form?.baseData?.makeupModules" />
        </ElFormItemBox>
        <ElFormItemBox label="平张断张">
          <TextBox :data="form?.baseData?.makeupPzDz" />
        </ElFormItemBox>
        <ElFormItemBox label="色数">
          <TextBox :data="form?.baseData?.makeupColors" />
        </ElFormItemBox>
        <ElFormItemBox label="间距">
          <TextBox :data="form?.baseData?.makeupSpaceBetween" unit="mm" />
        </ElFormItemBox>
        <ElFormItemBox label="跳距">
          <TextBox :data="form?.baseData?.makeupSkipDistance" unit="mm" />
        </ElFormItemBox>
        <ElFormItemBox label="留边尺寸">
          <TextBox :data="form?.baseData?.marginSize" unit="mm" />
        </ElFormItemBox>
        <ElFormItemBox label="每组高度">
          <TextBox :data="form?.baseData?.eachGroupHeight" unit="mm" />
        </ElFormItemBox>
        <ElFormItemBox label="每组数量">
          <TextBox :data="form?.baseData?.eachGroupQuantity" :unit="form?.baseData?.productUnit" />
        </ElFormItemBox>
        <ElFormItemBox label="每刀高度">
          <TextBox :data="form?.baseData?.knifeTimes" unit="mm" />
        </ElFormItemBox>
        <ElFormItemBox label="刀模信息" class="wAuto">
          <TextBox :data="form?.baseData?.knifeInformation" />
        </ElFormItemBox>
        <ElFormItemBox label="丝网版信息" class="wAuto">
          <TextBox :data="form?.baseData?.plateInformation" />
        </ElFormItemBox>
        <ElFormItemBox label="生产备注" class="wAuto">
          <TextBox :data="form?.baseData?.productionRequirement" />
        </ElFormItemBox>
      </FlexBox>
    </CellBox>
    <CellBox title="工艺信息">
      <TableBoxMx v-if="options?.produceCraft?.length > 0" :data="{
        disabled: true,
        tbody: form?.productTechniqueList || [],
        thead: [
          {
            label: '工艺编号',
            prop: 'craftCode',
            align: 'center',
            width: 80,
          },
          {
            label: '工艺名称',
            prop: 'craftCode',
            align: 'left',
            width: 220,
            options: options?.produceCraft,
          },
          {
            label: '使用设备',
            prop: 'deviceCode',
            align: 'left',
            width: 160,
            optionsRow: 'produceMachineList',
            labelName: 'machineName',
            valueName: 'machineCode',
          },
          {
            label: '备注',
            prop: 'craftRequirement',
            align: 'left',
          }
        ],
      }">
      </TableBoxMx>
    </CellBox>
    <CellBox title="材料信息">
      <GoodList :data="{
        disabled: true,
        rowKey: 'specification',
        prop: 'productMaterialList',
        tbody: form?.productMaterialList || [],
        thead: [
          {
            label: '使用类型',
            prop: 'useType',
            align: 'center',
            width: 120,
            options: [
              {
                label: '常用料',
                value: 0,
              },
              {
                label: '备用料',
                value: 1,
              }
            ]
          },
        ],
      }">
      </GoodList>
    </CellBox>
    <PackageInfo :data="form?.baseData" isText :isEdit="false" />
  </el-form>
</template>
<script setup lang="ts">
import '../pageCss.scss'; // 引入样式
const { proxy } = getCurrentInstance() as any;
const props = withDefaults(
  defineProps<{
    form?: any;//数据源
    options?: any;
  }>(),
  {
  },
);

import { getProduceCraft } from '@/utils/optionsArr.ts';
onMounted(() => {
  getProduceCraft(props.options, 'produceCraft') //获取工艺数据
});
</script>
